
<template>
  <div id="post_box">
    <div id="post_top">
      <div style="display: inline-block;float: right">
        <el-button type="primary" @click="addPost">新增岗位</el-button>
      </div>
      <div style="display: inline-block;float:left">
        <el-form>
          <el-form-item label="岗位名称">
            <el-input v-model.trim="postName" @input="query()"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div id="postListTable">
      <el-table :data="postList" style="width: 100%; margin-bottom: 10px" height="700" >
        <el-table-column fixed type="index" width="80" label="序号" />
        <el-table-column prop="postCode" label="岗位编码"/>
        <el-table-column fixed  prop="postName" label="岗位名称"/>
        <el-table-column prop="status" label="状态">
          <template #default="scope" >
            <el-tag class="ml-2"  v-if="scope.row.status==='0'">正常</el-tag>
            <el-tag class="ml-2" type="danger"  v-if="scope.row.status==='1'">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期"/>
        <el-table-column label="操作" width="300">
          <template #default="scope" >
            <el-button size="small" type="primary" @click="updatePost(scope.row)">编辑</el-button>
            <el-button size="small" type="danger"  @click="deletePost(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;padding-top: 1%">
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            background layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
    <div id="updatePostDialog">
      <el-dialog v-model="updatePostDialogVisible" width="550" title="修改岗位">
        <el-form :model="updatePostInfo">
          <el-form-item label="岗位名称">
            <el-input v-model.trim="updatePostInfo.postName" placeholder="请输入岗位名称"/>
          </el-form-item>
          <el-form-item label="岗位编码">
            <el-input v-model.trim="updatePostInfo.postCode" placeholder="请输入岗位编码"/>
          </el-form-item>
          <el-form-item label="显示循序">
            <el-input v-model.trim="updatePostInfo.postSort" placeholder="请输入显示循序"/>
          </el-form-item>
          <el-form-item label="岗位状态">
            <el-select v-model="updatePostInfo.status" placeholder="岗位状态">
              <el-option value="0" label="正常">正常</el-option>
              <el-option value="1" label="停用">停用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位备注">
            <el-input v-model.trim="updatePostInfo.remark" type="textarea" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="updatePostDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confrimUpdatePost">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
    <div id="addPostDiaLog">
      <el-dialog v-model="addPostDialogVisible" width="550" title="添加岗位">
        <el-form :model="addPostInfo">
          <el-form-item label="岗位名称">
            <el-input v-model.trim="addPostInfo.postName" placeholder="请输入岗位名称"/>
          </el-form-item>
          <el-form-item label="岗位编码">
            <el-input v-model.trim="addPostInfo.postCode" placeholder="请输入岗位编码"/>
          </el-form-item>
          <el-form-item label="显示顺序">
            <el-input v-model.trim="addPostInfo.postSort" placeholder="请输入显示顺序"/>
          </el-form-item>
          <el-form-item label="岗位状态">
            <el-select v-model="addPostInfo.status" placeholder="岗位状态">
              <el-option value="0" label="正常">正常</el-option>
              <el-option value="1" label="停用">停用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位备注">
            <el-input v-model.trim="addPostInfo.remark" type="textarea" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addPostDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confrimAddPost">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import router from "../../router";
import {addNewPost, deletePostById, getPostInfoById, getPostList, updatePostById} from "../../api/system";

const postList = ref([]);
const updatePostInfo = ref({});
const addPostInfo = ref({});
const updatePostDialogVisible = ref(false);
const addPostDialogVisible = ref(false);
let pageNum = ref<number>(1);
let pageSize = ref<number>(15);
let total = ref<number>(0)
let postName = ref<string>('');
onMounted(async () => {
  await query();
})
const query = async () => {
  let res = await getPostList({pageNum:pageNum.value,pageSize:pageSize.value,postName:postName.value});
  postList.value = res.data.list;
  total.value = res.data.total;
}
const deletePost = async (row) => {
  ElMessageBox.confirm('确认删除该岗位?').then( async () => {
    let res = await deletePostById({id:row.postId});
    if (res.code == 200){
      ElMessage.success(res.msg);
      await query();
    }else {
      ElMessage.error(res.msg);
    }
  })
}
const updatePost = async (row) => {
  updatePostInfo.value={};
 let res = await getPostInfoById({postId:row.postId});
  updatePostInfo.value = res.data;
  console.log(res.data);
  updatePostDialogVisible.value=true;
}
const confrimUpdatePost = async () => {
  let res = await updatePostById(updatePostInfo.value);
  if (res.code == 200){
    ElMessage.success(res.msg);
    await query();
    updatePostDialogVisible.value=false;
  }else {
    ElMessage.error(res.msg);
  }
}
const addPost = () => {
  addPostInfo.value={};
  addPostDialogVisible.value=true;
}
const confrimAddPost = async () => {
  let res = await addNewPost(addPostInfo.value);
  if (res.code == 200){
    ElMessage.success(res.msg);
    await query();
    addPostDialogVisible.value=false;
  }else {
    ElMessage.error(res.msg);
  }
}
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await query()
}
</script>
<style scoped>
</style>
